<template>
    <div class="login">

        <div class="container">
            <div class="log">
                <img :src="this.log" alt="">
            </div>
            <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field 
                v-model="username" 
                label="账号" 
                placeholder="请输入用户名" 
                label-align="left"
                label-width="3.2em"
                right-icon="clear"
                @click-right-icon="clearClick"
                />
                <van-field 
                v-model="password"
                :type="passwordType"
                label="密码" 
                placeholder="请输入密码" 
                label-align="left"
                label-width="3.2em"
                :right-icon="eyeIcon"
                @click-right-icon="showEye"
                />
                
            </van-cell-group>

            <div class="btn-login">
                <van-button
                type="primary" 
                size="large" 
                round
                color="#7232dd"
                text="登录"
                native-type="submit"
                >
                登录
                </van-button>
            </div>
            </van-form>
            <router-link to="register">还没账号?去注册</router-link>
        </div>
    </div>

</template>

<script>
import log from '../../assets/logo.png'
import { login } from '../../api/login'
import { showFailToast, showSuccessToast } from 'vant';

export default {
    name: 'Login',
    data() {
        return {
            username: '13199887766',
            password: '123456',
            show:'closed-eye',
            isShow:false,
            log:log
        }
    },
    computed: {
        eyeIcon(){
            return this.isShow ?'closed-eye':'eye-o'
        },
        passwordType(){
            return this.isShow ?'text':'password'
        }
    },
    methods:{
        // 切换密码显示与隐藏
        showEye(){
            this.isShow=!this.isShow
        },
        clearClick(){
            this.username = ''
            this.password = ''
        },
        // 登录的提交事件
        // async onSubmit({username,password}){
        //     const { status, message, token } = await login(username, password)
        //     console.log(this.username,this.password);
        //     console.log(message);
        //     if (status === 200){
        //         showSuccessToast('登录成功')
        //         //将登录成功的 token 保存到本地存储中
        //         sessionStorage.setItem('token',token)
        //         //登录成功,默认跳转到 '我的' 页面中
        //         setTimeout(() => {
        //             this.$router.push('/mine')
        //         }, 2000);
        //     }else{
        //         showFailToast(message)
        //     }
            
        // }

        /**
         * 表单提交的事件处理程序
         */
        async onSubmit({username,password}){
            //调用 store 中的异步登录 action 方法,实现登录,并将登录成功的
            //token 及用户基本信息保存到store 的 state 中
            const result = await this.$store.dispatch('user/asyncLogin', {username,password})
            console.log('登录结果',result);
            if (result){
                showSuccessToast('登录成功')
                //登录成功,默认跳转到 '我的' 页面中
                setTimeout(() => {
                    this.$router.push(this.$route.query.redirect ?? '/mine')
                }, 2000);
            }else{
                showFailToast('用户名或密码错误')
            }
            
        }
    }
}
</script>

<style lang="scss" scoped>
.login{
    width: 100%;
    height: 100%;
    // background-color: red;
    .container{
        width: 80%;
        height: 100%;
        // background-color: green;
        margin:1.2vh auto;
        display: flex;
        flex-direction: column;
        align-items: center;

        .log{
            width: 100%;
            height: 170px;
            // background-color: aqua;
            img{
                display: block;
                margin: 20px auto;
            }
        }
        .btn-login{
            width: 80%;
            margin-top: 30px;
            margin-bottom:20px;
            margin-left: 30px;
        }
    }
}
</style>
